<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="../assets/logo.png" class="logo_img" />
        <span>教育部全国高校名单 (截止2020-06-30)</span>
      </div>
      <el-button type="info" @click="logout">安全退出</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff">
          <el-submenu index="1">
            <template slot="title"> 
              <span>高校类型</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">一流大学</el-menu-item>
              <el-menu-item index="1-2">一流学科</el-menu-item>
              <el-menu-item index="1-3">985高校</el-menu-item>
              <el-menu-item index="1-4">211高校</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
         <el-menu-item index="4"> 
            <span slot="title">所在地区</span>
        </el-menu-item>
          
        </el-menu>
      </el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
        data(){
            return{
                //菜单列表
                menuList:[],
            }
        },
// onload事件
    created(){
        this.getMenuList();
    },
    methods: {
        logout() {
        // window.sessionStorage.clear();
        this.$router.push("/login");
        },
        getMenuList(){
            this.$http.get("index");

        },
    }

};
</script>
<style lang="less" scoped>
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between; // 左右贴边
  padding-left: 0%; // 左边界
  align-items: center; // 水平
  color: #fff;
  font-size: 20px;
  > div {
    //左侧div加布局
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
.home-container {
  height: 100%;
}
// 头样式
.el-header {
  background-color: #c6d8e4;
}
// 侧边
.el-aside {
  background-color: #333744;
}
// 主体
.el-main {
  background-color: #ffffff;
}
.logo_img {
  width: 55px;
  height: 55px;
}
</style>
